
import {Row,Col,Steps ,Form ,Input ,Select , Button,message, Modal } from "antd"
import React, { Component, useRef ,useState ,useEffect,useContext } from 'react'
import {xmTypeList} from "@/utils"
import RicdEditor from "./richEditor"
import {UserOutlined,SolutionOutlined,SmileOutlined,CodeOutlined,LockOutlined } from "@ant-design/icons"
import { ajax } from '@/services';
import info from "@/mobx/info"
import {observer} from "mobx-react"
import { history } from 'umi';
import {changePathname} from "@/redux/action"
import { GolBalContext } from '@/redux/index';
const steps = [
  {title:'项目基本信息',desc:'请填写项目的地址和类别',status:"process",icon:<UserOutlined />},
  {title:'项目难点亮点技术点',desc:'请填写项目难点亮点技术点(项目细节)' ,status:"wait",icon:<SolutionOutlined  />},
  {title:'提交项目',desc:'请你确认后再提交项目',status:"wait",icon:<SmileOutlined   />},
]

const tailLayout = {
  wrapperCol:{
      span:8,
      offset:0
  }
}

const { Step } = Steps;
export default function SubmitGradePage(){
  let [current,setCurrent] = useState<any>(0)
  let [obj,setObj] = useState<any>({})
  let [ content ,setContent] = useState<any>('')
  let {userInfo} = info
  const form:any = useRef()
  const {state,dispatch} = useContext(GolBalContext)
  useEffect(()=>{
    if(userInfo){
      if(!userInfo.banji){
        Modal.error({
          title: '提示',
          content: '你还没有添加班级,请去添加',
          onOk() {
            console.log('OK');
            history.push("/main/userinfo")
          },
        });
      }
    }
    
  },[])
  const nextAction = ()=>{
    if(current==0){
      form.current.validateFields()
      .then(value=>{
        console.log(value)
        setObj(value);
        current++;
        setCurrent(current)
      })
      .catch(err=>{
        message.error("请输入数据")
      })
    }else{
        if(current==1&&content==''){
          message.error("请项目难点亮点技术点")
        }else{
          current++;
          setCurrent(current)
        }
    }
    
  }
  const prevAction = ()=>{
    current--;
    setCurrent(current)
  }
  const getContent = content=>{
    console.log(content)
    setContent(content)
  }

  // 提交项目 
  const lastSubmit = async ()=>{
    let {code,result} = await ajax.addxiangmu({
      content,
      username:userInfo.username,
      avatar:userInfo.avatar,
      ...obj,
      score:null,
      banji:userInfo.banji
    })
    if(code==200){
      history.push("/main/grade/my")
      dispatch(changePathname("/main/grade/my"))
    }
  }
  return (
    <div>
      <h2> 提交项目  -  (记录千锋学员的所有项目) </h2>
      <Row style={{marginTop:10}}>
        <Col span={24}>
            <Steps current={current}>
               {
                 steps.map((l,i)=>{
                   return (
                    <Step key={i}  title={l.title} description={l.desc} status={l.status} icon={l.icon}>

                    </Step>
                   )
                 })
               }
            </Steps>
        </Col>
      </Row>

      <Row style={{marginTop:10}}>
        <Col span={24}>
            <div style={{display:current==0?"block":'none'}}>
              <p>添加基本信息</p>
                <Form
                    name="basic"
                    initialValues={{
                     
                    }}
                    autoComplete="off"
                    className="login-form"
                    layout={'vertical'}
                    ref={form}
                  >
                     <Form.Item
                        {...tailLayout}
                        name="title"
                        label="项目标题"
                        rules={[
                          { required: true, message: '请输入项目标题' },
                        ]}
                      >
                        <Input  placeholder="请输入项目标题" />
                    </Form.Item>
                    <Form.Item
                        {...tailLayout}
                        name="url"
                        label="项目地址"
                        rules={[
                          { required: true, message: '请输入项目地址' },
                        ]}
                      >
                        <Input  placeholder="请输入项目地址" />
                    </Form.Item>
                    <Form.Item
                        {...tailLayout}
                        name="type"
                        label="项目类别"
                        rules={[
                          { required: true, message: '请选择项目类别' },
                        ]}
                      >
                        <Select placeholder="请选择项目类别">
                            {
                              xmTypeList.map((l,i)=>{
                                return (
                                  <Select.Option key={i} value={l.value}>
                                    {l.text}
                                </Select.Option>
                                )
                              })
                            }
                        </Select>
                    </Form.Item>
                </Form>
            </div>
            <div style={{display:current==1?"block":'none',minHeight:300}}>
                <p>项目的难点亮点技术点bug点</p>
                <RicdEditor
                  content={content}
                  getContent={getContent}
                >

                </RicdEditor>
            </div>
            <div style={{display:current==2?"block":'none'}}>
               <p>项目信息填写完毕-{current}</p>        
            </div>
        </Col>
      </Row>

      <Row style={{marginTop:10}}>
        <Col >
            {
              current<steps.length-1 && <Button onClick={nextAction} type="primary">下一步</Button>  
            }
            {
              current>0 && <Button type="primary" onClick={prevAction}  style={{margin:"0 10px"}} danger>上一步</Button>     
            }
            {
              current==steps.length-1&& <Button onClick={lastSubmit} type="primary" >提交项目</Button>         
            }


        </Col>
      </Row>
    </div>
  )
}